<!--
 * @Author: FanWeiHua
 * @Date: 2021-07-27 11:46:34
 * @LastEditTime: 2021-08-04 12:59:15
 * @Description: 操作页
-->
<template>
  <a-layout class="handle-layout">
    <a-layout-sider
      class="handle-layout-left"
      v-model="collapsed"
      :trigger="null"
      collapsible
      width="160"
      collapsedWidth="70"
    >
      <div class="logo" />
      <a-menu class="menu" theme="dark" mode="inline" :selectedKeys="[...curMenuKey]">
        <a-menu-item v-for="menu in modulesMenus" :key="menu.key" @click="onMenuEvent(menu)">
          <a-icon :type="menu.icon" />
          <span>{{ menu.name }}</span>
        </a-menu-item>
      </a-menu>
      <a-menu class="menu-foot" theme="dark" mode="inline" :selectedKeys="[...curMenuKey]">
        <a-menu-item v-for="menu in footMenus" :key="menu.key" @click="onMenuEvent(menu)">
          <a-icon :type="menu.icon" />
          <span>{{ menu.name }}</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout class="handle-layout-content">
      <a-layout-header><label class="title">要情指令系统</label></a-layout-header>
      <a-layout-content class="content">
        <a-tabs
          type="editable-card"
          hideAdd
          @edit="onTabEdit"
          class="layout-tab"
          @change="onTabChange"
          :activeKey="currentTabKey"
        >
          <!-- 功能模块的渲染位置 -->
          <a-tab-pane v-for="tab in moduleTabs" :key="tab.key" :tab="tab.name" :closable="tab.closable">
            <!-- 指令流转 -->
            <Instruct v-if="tab.key === 1" />
            <!-- 要情管理 -->
            <ImAlarm v-else-if="tab.key === 2" />
            <!-- 首页 -->
            <Home v-else />
          </a-tab-pane>
        </a-tabs>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script>
import { logo } from '@path/common/server/iconServer.js'; // 图标服务
import { mapState } from 'vuex';
import { modulesMenus, footMenus } from './menus.js'; // 功能菜单
// 菜单集合
const SetMenus = [...modulesMenus, ...footMenus];
export default {
  data() {
    return {
      collapsed: true,
      logo,
      modulesMenus,
      footMenus,
      curMenuKey: [],
      currentTabKey: 4 // 默认首页
    };
  },
  mounted() {
    // 初始化功能模块
    this.initModule();
  },
  methods: {
    /**
     * 初始化功能模块
     */
    initModule() {
      this.$store.commit('funcModule/add', [footMenus[0]]);
      this.curMenuKey = [footMenus[0].key];
    },
    /**
     * 菜单事件
     */
    onMenuEvent({ key, name }) {
      this.currentTabKey = key;
      if (key === 4) {
        return;
      }
      const keyIndex = this.curMenuKey.findIndex(item => item === key);
      const tabs = [...this.moduleTabs];
      if (keyIndex > -1) {
        this.curMenuKey.splice(keyIndex, 1);
        tabs.splice(keyIndex, 1);
      } else {
        this.curMenuKey.push(key);
        tabs.push({ key, name });
      }
      this.$store.commit('funcModule/add', tabs);
    },
    /**
     * tabs操作
     */
    onTabEdit(targetKey, action) {
      if (action === 'remove') {
        // tab删除逻辑处理
        this.tabRemove(targetKey);
      }
    },
    /**
     * tab删除逻辑处理
     */
    tabRemove(targetKey) {
      let activeKey = this.currentTabKey;
      let lastIndex;
      this.moduleTabs.forEach((pane, i) => {
        if (pane.key === targetKey) {
          lastIndex = i - 1;
        }
      });
      const panes = this.moduleTabs.filter(pane => pane.key !== targetKey);
      if (panes.length && activeKey === targetKey) {
        if (lastIndex >= 0) {
          activeKey = panes[lastIndex].key;
        } else {
          activeKey = panes[0].key;
        }
      }
      this.$store.commit('funcModule/add', panes);
      const keyIndex = this.curMenuKey.findIndex(item => item === targetKey);
      this.curMenuKey.splice(keyIndex, 1);
      this.currentTabKey = activeKey;
    },
    /**
     * tab切换
     */
    onTabChange(targetKey) {
      this.currentTabKey = targetKey;
    }
  },
  components: {
    // 功能模块组件
    ...SetMenus.reduce((last, cur) => {
      if (cur.enName && cur.view) {
        last[cur.enName] = cur.view;
        return last;
      }
      return last;
    }, {})
  },
  computed: {
    ...mapState({
      // 功能模块
      moduleTabs: state => state.funcModule.moduleTabs
    })
  }
};
</script>
<style lang="less">
@import './index.less';
</style>
